<template>
	<div class="cms-index-container">
		<el-row v-if="sites.length <= 0">
			<el-col>
				<el-card shadow="hover" class="mr10 h100">
					<center>
						<el-empty description="您还未创建站点空间~~"></el-empty>
						<el-button v-auth="'cms:site:add'" type="primary" @click="onOpenAddSite()"><i class="fa fa-hand-o-right"></i>点击创建一个站点空间吧~~</el-button>
					</center>
				</el-card>
			</el-col>
		</el-row>
		<el-row v-else>
			<el-col :xs="24" :sm="4">
				<el-card shadow="hover" class="mr10 h100">
					<el-collapse v-model="accordion.active" accordion @change="onAccordionChange">
						<el-collapse-item v-for="(item, index) in sites" :key="index" :name="`collapse-${index}`">
							<template #title> 
								<i v-if="item.status == 0" class="fa fa-sitemap" style="color: #67C23A;"></i>
								<i v-else class="fa fa-sitemap" style="color: #E6A23C;"></i>
								<span class="ml10">{{item.name}}</span>
							</template>
							<el-tree 
								node-key="id"
								:data="channels[index].datas" 
								:props="channels[index].props"
								:default-expanded-keys="channels[index].defaultExpandedKeys"
								:highlight-current="true"
								:expand-on-click-node="false" 
								@node-click="channelNodeClick">
							</el-tree>
						</el-collapse-item>
					</el-collapse>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="20">
				<!-- 站点管理 -->
				<el-card v-if="accordion.card == 'site'" shadow="hover" class="mb10">
					<el-row>
						<el-col :xs="24">
							<el-button v-auth="'cms:site:add'" @click="onOpenAddSite()" size="small" type="primary" icon="el-icon-document-add">新增站点</el-button>
							<el-button v-auth="'cms:site:edit'" @click="onOpenEditSite()" size="small" type="primary" icon="el-icon-edit">修改站点</el-button>
							<el-button v-auth="'cms:site:remove'" @click="onOpenDelSite()" size="small" type="primary" icon="el-icon-delete">删除站点</el-button>
							<el-button v-auth="'cms:channel:add'" @click="onOpenAddChannel()" size="small" type="primary" icon="el-icon-document-add">新增栏目</el-button>
						</el-col>
						<el-divider />
						<el-col :xs="24">
							<center>
								<el-empty description="The dashboard is being built, so stay tuned. ~~"></el-empty>
							</center>
						</el-col>
					</el-row>
				</el-card>
				
				<!-- 栏目管理 -->
				<el-card v-if="accordion.card == 'channel'" shadow="hover" class="mb10">
					<Channel ref="channelRef" :model="accordion.channel" @submit="onChannelsReload"></Channel>
				</el-card>
				
				<!-- 稿件管理 -->
				<el-card v-if="accordion.card == 'document'" shadow="hover" class="mb10">
					<Document ref="documentRef" :model="accordion.channel"></Document>
				</el-card>
				
			</el-col>
		</el-row>
		
		<AddSite ref="addSiteRef" @submit="onSitesReload"/>
		<EditSite ref="editSiteRef" @submit="onSitesReload"/>
		<AddChannel ref="addChannelRef" @submit="onChannelsReload"/>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { lineToTreeData } from '/@/utils/commonFunction';
import AddSite from '/@/views/cms/channel/addSite.vue';
import EditSite from '/@/views/cms/channel/editSite.vue';
import AddChannel from '/@/views/cms/channel/addChannel.vue';
import Channel from '/@/views/cms/channel/index.vue';
import Document from '/@/views/cms/document/index.vue';
import { getChannelList, delSite } from '/@/api/cms/channel/index';
export default {
	name: 'cms',
	components: { AddSite, EditSite, AddChannel, Channel, Document },
	setup() {
		const addSiteRef = ref();
		const editSiteRef = ref();
		const addChannelRef = ref();
		const channelRef = ref();
		const documentRef = ref();
		const state = reactive({
			accordion: {
				index: 0,
				active: 'collapse-0',
				card: 'site',
				site: {},
				channel: {}
			},
			sites: [],
			channels: []
		});
		
		const loadSites = async () => {
			await getChannelList({parentId : 0}).then(res => {
				if(res.code === 0){
					state.accordion.site = res.data.length > 0 ? res.data[0] : {};
					state.accordion.index = 0;
					state.accordion.active = 'collapse-0';
					state.sites = res.data;
					state.sites.forEach(() => {
						state.channels.push({
							datas: [],
							defaultExpandedKeys: [],
							props: {
								label: 'name',
								children: 'children'
							}
						});
					});
				}
			});
			loadChannels();
		}
		
		const loadChannels = async () => {
			await getChannelList({siteId : state.accordion.site.siteId}).then(res => {
				if(res.code === 0){
					let index = state.accordion.index;
					state.channels[index].datas = lineToTreeData(res.data);
					//默认第一级展开
					state.channels[index].defaultExpandedKeys.push(state.channels[index].datas[0].id);
				}
			})
		}
		
		//点击站点header
		const onAccordionChange = (active) => {
			state.accordion.card = 'site';
			if(active){
				let index = active.split('-')[1];
				state.accordion.index = index;
				state.accordion.site = state.sites[index];
				if(state.channels[index].datas.length <= 0){
					loadChannels();
				}
			}
		}
		
		//新增站点
		const onOpenAddSite = (row: object) => {
			addSiteRef.value.openDialog(row);
		}
		const onOpenEditSite = (row: object) => {
			editSiteRef.value.openDialog(state.accordion.site);
		}
		const onOpenDelSite = (row: object) => {
			ElMessageBox.confirm('确定删除该【' + state.accordion.site.name + '】站点空间信息吗？', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				delSite([state.accordion.site.id]).then((res) => {
					if(res.code === 0){
						ElMessage.success('删除成功');
						onSitesReload();
					}
				});
			}).catch(() => {});
		}
		
		//新增栏目
		const onOpenAddChannel = (row: object) => {
			addChannelRef.value.openDialog(state.accordion.site);
		}
		
		// 站点栏目点击
		const channelNodeClick = (node: object) => {
			state.accordion.card = node.parentId == 0 ? 'channel' : 'document';
			state.accordion.channel = node;
		}
		// 数据重载
		const onSitesReload = () => {
			loadSites();
		}
		const onChannelsReload = () => {
			loadChannels();
		}
		// 页面加载时
		onMounted(() => {
			loadSites();
		});
		return {
			addSiteRef,
			editSiteRef,
			addChannelRef,
			channelRef,
			documentRef,
			onAccordionChange,
			onOpenAddSite,
			onOpenEditSite,
			onOpenDelSite,
			onOpenAddChannel,
			onSitesReload,
			onChannelsReload,
			channelNodeClick,
			...toRefs(state),
		};
	},
};
</script>